import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/checkpoint/checkpoint_rank_item.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointRankListWidget extends StatelessWidget {
  const CheckpointRankListWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(state: store.state);
    }, builder: (context, vm) {
      var stages = vm.state.yeXiuState.checkpointState.checkpointStages;
      return Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Container(
            width: setRatio(345),
            height: setRatio(370),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setRatio(10)),
                gradient: LinearGradient(
                    colors: [Color(0x902B2C30), Color(0x804A4C52)],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter)),
            child: Padding(
              padding: EdgeInsets.only(
                  left: setRatio(22),
                  right: setRatio(22),
                  top: setRatio(40),
                  bottom: setRatio(16)),
              child: ListView.separated(
                  itemCount: stages?.stageList?.length ?? 0,
                  separatorBuilder: (context, index) {
                    return SizedBox(
                      height: setRatio(16),
                    );
                  },
                  itemBuilder: (context, index) {
                    return CheckpointRankItemWidget(
                      index: index,
                    );
                  }),
            ),
          ),
          Container(
            transform:
                Matrix4.translationValues(setRatio(103), setRatio(-16), 0),
            width: setRatio(143),
            height: setRatio(38),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(imageUtilYeXiu(
                        'checkpoint/icon_checkpoint_title_bg@3x')))),
          ),
          Container(
            width: setRatio(100),
            height: setRatio(38),
            transform:
                Matrix4.translationValues(setRatio(125), setRatio(-16), 0),
            child: Center(
              child: Text(stages?.dungeonName ?? '',
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Color(0xFFFFFFFF),
                      fontFamily: FontFamily.PINGFANG,
                      fontWeight: FontWeightCustom.PF_Medium,
                      fontSize: setTextSp(15))),
            ),
          ),
        ],
      );
    });
  }
}
